<template>
  <!-- 预警决策主页-智能联动模块 -->
  <div id="smartScroller" class="smart warningtablestyle">
    <!-- <div class="smart-container colcenterbox">
      <el-table
        :data="tableData"
        style="width: 100%"
        height="100%"
        @selection-change="handleSelectionChange"
        :row-class-name="tableRowClassName"
      >
        <el-table-column prop="alarmTime" label="变电站" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="alarmPowerStation" label="设备" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="alarmEquipment" label="负载率" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="alarmTemp" label="油温" :show-overflow-tooltip="true"></el-table-column>
      </el-table>
    </div>-->
    <div class="smart-bottom-title">
      <div class="item">变电站名称</div>
      <!-- <div class="item">设备名称</div> -->
      <div class="item">联动原因</div>
      <div class="item">联动时间</div>
    </div>
    <div class="marquee_box">
      <ul class="marquee_list" :class="{marquee_top:animate}" v-if="!nodata">
        <li
          :class="index%2==0?'lione':'litwo'"
          v-for="(item, index) in linkageList"
          :key="index"
          @dblclick="goSmartPage(item)"
        >
          <span class="spanone" :title="item.stationName">{{ item.stationName }}</span>
          <!-- <span class="spanone" :title="item.deviceName">{{ item.deviceName }}</span> -->
          <span class="spantwo" style="width:50%" :title="item.linkageReason">{{ item.linkageReason }}</span>
          <span class="spantwo" :title="item.linkageTime">{{ item.linkageTime}}</span>
          <!-- <span class="spantwo" :title="item.linkageTime">"2020-08-31T16:00:00.000+00:00"</span> -->
        </li>
      </ul>
      <div class="no-dataimg" v-if="nodata">
        <Nodata />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue ,Watch} from "vue-property-decorator";
import Nodata from "@/components/Nodata/index.vue";
import { log } from "three";
interface tableDataList {
  index: number;
  alarmTime: string;
  alarmPowerStation: string;
  alarmEquipment: string;
  alarmTemp: string;
}
interface objType {
  row: object;
  rowIndex: number;
}
@Component({
  components: {
    Nodata,
  },
})
export default class WarningSmart extends Vue {
  @Prop({ default: () => [] })
  linkageList: any;
  private animate: boolean = false;
  private smartScrollTimer; // 滚动定时器
  nodata:boolean= false;
  tableData: Array<tableDataList> = [
    {
      index: 1,
      alarmTime: "110kV商西变电站",
      alarmPowerStation: "主变",
      alarmEquipment: "变压器",
      alarmTemp: "80°",
    },
    {
      index: 2,
      alarmTime: "110kV商西变电站",
      alarmPowerStation: "主变",
      alarmEquipment: "变压器",
      alarmTemp: "80°",
    },
    {
      index: 3,
      alarmTime: "110kV商西变电站",
      alarmPowerStation: "主变",
      alarmEquipment: "变压器",
      alarmTemp: "80°",
    },
    {
      index: 4,
      alarmTime: "110kV商西变电站",
      alarmPowerStation: "主变",
      alarmEquipment: "变压器",
      alarmTemp: "80°",
    },
  ];
  tableSelect: Array<object> = [];

  // 跳转到二级智能联动页面
  private goSmartPage(smartData: any) {
    this.$router.push({
      name: "linkage",
      params: { smartData: smartData },
    });
  }

  // 表格选择事件
  handleSelectionChange(val: any): void {
    // console.log(val);

    this.tableSelect = val;
  }
  // 表格隔行变色
  tableRowClassName({ row, rowIndex }: objType): string {
    // console.log(row, rowIndex);
    if (rowIndex % 2 === 0) {
      return "row1";
    } else {
      return "row2";
    }
  }

  // 监听智能联动滚动列表
  // get newLinkageList() {
  //   console.log(this.linkageList);
    
  //   if (this.linkageList.length > 8) {
  //     this.openIntercal();
  //   } else {
  //     this.closeInterval();
  //   }
  //   if (this.linkageList && this.linkageList.length > 0) {
  //     (this as any).nodata = false
  //     this.linkageList.map((item) => {
  //       item.linkageTime =
  //         item.linkageTime.slice(0, 10) + " " + item.linkageTime.slice(11, 19);
  //     });
  //     console.log(this.linkageList);
  //   } else {
  //     (this as any).nodata = true
  //   }

  //   return this.linkageList;
  // }
  // 监听智能联动滚动列表
  @Watch("linkageList", { deep: true })
  public linkageListchange(to: any, from: any) {
    console.log(to);
    if (this.linkageList.length > 8) {
      this.openIntercal();
    } else {
      this.closeInterval();
    }
    if (this.linkageList && this.linkageList.length > 0) {
      (this as any).nodata = false
      this.linkageList.map((item) => {
        item.linkageTime =
          item.linkageTime.slice(0, 10) + " " + item.linkageTime.slice(11, 19);
      });
    } else {
      (this as any).nodata = true
    }
    
  }

  // 开启定时滚动
  private openIntercal() {
    if (this.smartScrollTimer === undefined) {
      // 启动主变负载滚动
      this.smartScrollTimer = setInterval(this.showMarquee, 2000);
    }
  }

  // 关闭定时滚动
  private closeInterval() {
    if (this.smartScrollTimer) {
      clearInterval(this.smartScrollTimer);
      this.smartScrollTimer = undefined;
    }
  }

  // 滚动机制
  private showMarquee() {
    this.animate = true;
    setTimeout(() => {
      this.linkageList.push(this.linkageList[0]);
      this.linkageList.shift();
      this.animate = false;
    }, 500);
  }

  mounted() {
    var smartScroller = document.getElementById("smartScroller");
    // 鼠标移入滚动列表，关闭定时器
    smartScroller.onmouseover = () => {
      this.closeInterval();
    };
    // 鼠标移出滚动列表，判断是否关闭定时器
    smartScroller.onmouseout = () => {
      if (this.linkageList.length > 8) {
        this.openIntercal();
      } else {
        this.closeInterval();
      }
    };
  }
}
</script>

<style lang="scss" scoped>
.smart {
  width: 100%;
  height: 100%;
  // padding: 7% 2% auto 2%;
  padding-top: 5%;
  padding-left: 3%;
  padding-right: 3%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  &-bottom-title {
    width: 100%;
    height: 10%;
    display: flex;
    justify-content: space-around;
    text-align: center;
    background-color: rgb(25, 56, 127);
    .item {
      font-size: 0.18rem;
      width: 25%;
      height: 100%;
      // background-color: salmon;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  /* 滚屏 */
  .marquee_box {
    display: block;
    position: relative;
    width: 100%;
    height: 88%;
    // flex: 1;
    // height: 100%;
    overflow: hidden;
    // background-color: hotpink;
  }
  .marquee_list {
    width: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    .lione {
      // background-color: gray;
    }
    .litwo {
       background: rgb(32, 62, 135, 0.65);
    }
  }
  .marquee_top {
    transition: all 0.5s;
    margin-top: -0.38rem;
  }
  .marquee_list li {
    height: 0.38rem;
    // line-height: 0.6rem;
    font-size: 0.16rem;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-content: center;
    // background-color: red;
  }
  .no-dataimg{
      margin-top: 1rem;
    }
  .spanone {
    // padding: 0 0.02rem;
    // height: 0.35rem;
    line-height: 0.38rem;
    text-align: center;
    width: 25%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    // background-color: palegreen;
  }
  .spantwo {
    text-align: center;
    width: 25%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    // background-color: palegreen;
  }
}
</style>

